<template>
	<div class="citys">
		<label>定位/附近城市</label>
		<ol>
			<li>{{show}}</li>
		</ol>
		<label>热门城市</label>
		<ul>
			<li v-for="it in hostcity" :key="it.code" @click="tohome(it.name)" :class="{'default':show==it.name}">{{it.name}}</li>
		</ul>
		<article v-for="(it,i) in citylist" :key="i">
			<label>字母{{it.initial}}开头的城市</label>
			<ul>
				<li v-for="item in it.list" :key="item.code" @click="tohome(item.name)" :class="{'default':show==item.name}">{{item.name}}</li>
			</ul>
		</article>
	</div>
</template>

<script>
	import {mapMutations,mapState} from 'vuex'
	export default{
		name:'Citys',
		data(){
			return{
				hostcity:[],
				citylist:[],
				show:'北京'
			}
		},
		created() {
			let that=this//备份
			this.axios.get('api/city.json').then((res)=>{
				let data=res.data.data
				that.hostcity=data.hotCities
				that.citylist=data.city
			}).catch((error)=>{
				console.log(error)
			})
		},
		methods:{
			tohome(val){
				this.show=val
				this.changeCity(val)
				this.$router.push('/')
			},
			...mapMutations(['changeCity'])
		},
		computed:{
			...mapState(['cityname'])
		},
		mounted() {
			if (localStorage.city) {
				this.show=localStorage.city
			}
		}
	}
</script>

<style scoped>
	.default{
		background: #FED101;
		color: white;
	}
	.citys{
		width: 95%;
		margin: 0 auto;
		color: gray;
	}
	.citys label{
		font-size: 0.35rem;
		display: block;
		padding-top: 0.2rem;
		padding-bottom: 0.2rem;
	}
	.citys ul{
		width: 100%;
		padding-bottom: 0.5rem;
		border-bottom: 0.01rem solid gray;
	}
	.citys ul li{
		width: 15%;
		display: inline-block;
		background: #e6e6e6;
		line-height: 0.8rem;
		text-align: center;
		border-radius: 0.5rem;
		margin: 0.05rem;
	}
	.citys ol li{
		background: #e6e6e6;
		line-height: 0.7rem;
		text-align: center;
		border-radius: 0.5rem;
		margin: 0.1rem;
		width: 15%;
	}
</style>
